<template>
  <div :class="single ? 'single-center-number' : 'center-number'" @click.stop>
    <div class="center-number-child waringBox" @click.stop="showTodayWarning">
      <div class="center-number-title">今日报警数量</div>
      <div class="numer-control">
        <div v-for="(item, index1) in oldVal" :key="item">
          <div
            class="number-alone"
            :style="{
              'background-image':
                index1 == oldVal.length - 1
                  ? 'url(' + imageUrl + ')'
                  : 'url(' + imageUrlnormal + ')',
            }"
          >
            <div class="number-alone-title">{{ item }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="center-number-child" @click.stop="showTodaySorties">
      <div class="center-number-title">今日侦测架次</div>
      <div class="numer-control">
        <div v-for="(item, index) in oldVal2" :key="item">
          <div
            class="number-alone"
            :style="{
              'background-image':
                index == oldVal2.length - 1
                  ? 'url(' + imageUrl + ')'
                  : 'url(' + imageUrlnormal + ')',
            }"
          >
            <div class="number-alone-title">{{ item }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, onMounted, reactive, ref, watch} from "vue";
import useCockpitStore from "@/store/modules/cockpit";
import useToolTabStore from "@/store/modules/toolTab";
import { backtopEmits } from "element-plus";

const cockpitStore = useCockpitStore();
const toolTabStore = useToolTabStore();

const oldVal = ref(0);
const oldVal2 = ref(0);

watch(() => cockpitStore.todayAlarm, val => {
  if (val) {
    oldVal.value = cockpitStore.todayAlarm
  }
},{ deep: true, immediate: true });

watch(() => cockpitStore.deteceNum, val => {
  if (val) {
    oldVal2.value = cockpitStore.deteceNum
  }
},{ deep: true, immediate: true });


const showTodayWarning = () => {
  toolTabStore.changeWarning();
};

const showTodaySorties = () => {
  toolTabStore.changeSorties();
};

const props = defineProps({
  single: {
    type: Boolean,
    default: false,
  },
});

const imageUrl = ref(import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/numberClick.png");
const imageUrlnormal = ref(import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/number.png");
</script>
<style lang="scss" scoped>
.single-center-number {
  position: absolute;
  z-index: 10;
  width: auto;
  height: 60px;
  left: 50%;
  transition: -50%;
  transform: translateX(-50%);
  top: 10%;
  display: flex;
  justify-content: space-between;
  // pointer-events: none;
  cursor: pointer;
}
.center-number {
  position: absolute;
  z-index: 99;
  width: 655px;
  height: 60px;
  left: 50%;
  transition: -50%;
  transform: translateX(-50%);
  top: 13%;
  display: flex;
  justify-content: space-between;
  // pointer-events: none;
}
.waringBox{
  margin-right: 80px;
}

.center-number-child {
  display: flex;
  align-items: center;
  cursor: pointer;

  .center-number-title {
    font-size: 18px;
    font-family: PingFang SC;
    color: #ffffff;
    margin-right: 19px;
  }
}

.numer-control {
  display: flex;
}
.number-alone {
  width: 42px;
  height: 54px;
  display: flex;
  background: url("/img/cockpit/number.png");
  font-size: 28px;
  font-family: DigifaceWide;
  font-weight: 400;
  //color: #999999;
  padding: 7px 9px;
  //color: linear-gradient(to right, rgba(157, 247, 255, 1), rgba(3, 161, 184, 1));
  .number-alone-title {
    background: linear-gradient(
      180deg,
      rgba(157, 247, 255, 1),
      rgba(3, 161, 184, 1)
    ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
    -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
    -webkit-text-fill-color: transparent; /*给文字设置成透明*/
  }
}
</style>
